@import '~styles/colors';
@import '~styles/variables';

$form-field-label-color: $color-text-dark;
$form-field-label-error-color: $color-red;
$form-field-label-font-size: 0.75rem;
$form-field-label-font-weight: 600;
$form-field-label-line-height: 1rem;

$form-field-description-color: $color-text-grey;
$form-field-description-font-size: 0.75rem;
$form-field-description-font-weight: 500;
$form-field-description-line-height: 1rem;

$form-field-error-color: $color-red;
$form-field-error-border-color: $color-red;

.form-field {
	display: flex;

	width: 100%;
	margin: 5px 0;
	flex-flow: column nowrap;

	&__label-wrapper {
		display: flex;
		flex: 1 0 auto;
		flex-flow: column nowrap;
	}

	&__label,
	&__input,
	&__description {
		margin: 3px 0;
	}

	&__label {
		flex: 0 0 auto;

		transition: color $default-time-animation;
		text-align: left;
		white-space: nowrap;
		letter-spacing: 0;
		text-overflow: ellipsis;

		color: $form-field-label-color;

		font-size: $form-field-label-font-size;
		font-weight: $form-field-label-font-weight;
		line-height: $form-field-label-line-height;
	}

	&__input {
		display: flex;
		flex: 1 0 auto;
	}

	&__description {
		flex: 0 0 auto;

		min-height: $form-field-description-line-height;

		transition: color $default-time-animation;

		color: $form-field-description-color;

		font-size: $form-field-description-font-size;
		font-weight: $form-field-description-font-weight;
		line-height: $form-field-description-line-height;
	}

	&--error {
		.form-field__label,
		.form-field__input,
		.form-field__description {
			color: $form-field-error-color;
		}
	}

	&--required {
		.form-field__label::after {
			content: " *";
		}
	}
}
